<template>
  <!-- 创建一个下拉菜单，点击不会隐藏 -->
  <el-dropdown :hide-on-click="false">
    <!-- 触发下拉菜单的按钮，文本类型，根据行数据控制禁用状态 -->
    <el-button
      type="primary"
      text
      :disabled="row.$unauthorized"
      icon="CirclePlus"
    >
      <!-- 显示按钮文本，使用国际化 -->
      {{ $t('device.actions.more.name') }}
    </el-button>

    <!-- 下拉菜单内容 -->
    <template #dropdown>
      <el-dropdown-menu>
        <!-- 动态渲染下拉菜单项，根据options数组配置 -->
        <component
          :is="item.component"
          v-for="(item, index) of options"
          :key="index"

          v-bind="{
            ...$props,
            ...(item.props || {}),
          }"

          v-slot="{ loading, trigger }"
        >
          <!-- 根据加载状态显示不同内容 -->
          <el-dropdown-item :disabled="loading" @click="trigger">
            <template v-if="loading">
              <!-- 加载中图标 -->
              <el-icon class="is-loading">
                <Loading />
              </el-icon>
              <!-- 加载中文本 -->
              {{ $t('common.starting') }}
            </template>
            <template v-else>
              <!-- 非加载状态显示操作项文本 -->
              {{ $t(item.label) }}
            </template>
          </el-dropdown-item>
        </component>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
// 导入子组件
// <!-- 导入Record组件，用于显示或操作记录相关功能 -->
import Record from './components/Record/index.vue'

// <!-- 导入Camera组件，通常用于访问或显示相机功能 -->
import Camera from './components/Camera/index.vue'

// <!-- 导入Otg组件，主要用于处理OTG（On-The-Go）相关功能，如外接存储设备的数据读取 -->
import Otg from './components/Otg/index.vue'

// <!-- 导入Custom组件，通常用于实现自定义功能或界面 -->
import Custom from './components/Custom/index.vue'


// 当前组件定义
export default {
  // 注册子组件
  components: {
    Record,
    Camera,
    Otg,
    Custom,
  },
  // 合并所有子组件的props
  props: {
    ...Record.props,
    ...Otg.props,
    ...Camera.props,
    ...Custom.props,
  },
  // 定义数据
  data() {
    return {
      // 下拉菜单项配置
      options: [
        {
          // 录制操作项配置
          label: 'device.actions.more.record.name',
          component: 'Record',
        },
        {
          // 摄像头录制操作项配置
          label: 'device.actions.more.recordCamera.name',
          component: 'Record',
          props: {
            recordType: 'camera',
          },
        },
        {
          // 音频录制操作项配置
          label: 'device.actions.more.recordAudio.name',
          component: 'Record',
          props: {
            recordType: 'audio',
          },
        },
        {
          // 摄像头操作项配置
          label: 'device.actions.more.camera.name',
          component: 'Camera',
        },
        {
          // OTG操作项配置
          label: 'device.actions.more.otg.name',
          component: 'Otg',
        },
        {
          // 自定义操作项配置
          label: 'device.actions.more.custom.name',
          component: 'Custom',
        },
      ],
    }
  },
}
</script>

<style></style>
